<template>
    <view class="han-tag" :class="{ active: active }">
        <view class="han-tag-text">{{ text }}</view>
    </view>
</template>

<script setup>
// 定义组件的属性
const props = defineProps({
    text: {
        type: String,
        required: true
    },

    active: {
        type: Boolean,
        default: false
    }
});
</script>

<style scoped lang="scss">
.han-tag {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rpx 15rpx;
    border-radius: 10rpx;
    border: 1rpx solid $han-global-border-color;
    background-color: $han-global-bg-color;
    font-size: $han-font-size-xs;
    white-space: nowrap;
    margin: 0 10rpx;
    width: max-content;

    &.active {
        background: $han-accent-color;
        color: #fff;
    }
}

.han-tag-text {
    color: $han-global-secondary-font-color;
}
</style>
